<template>
    <div class="base-select" :style="{width:widthData}" @click.stop="openList()">
      <div>
        <div class="title-box">
            <span>{{title}}</span>
        </div>
        <ul class="list-box">
            <li class="list-view" v-for="(item, index) in listValue" :key="index" @click="selected(index)">
                <span>{{item.lable}}</span>
            </li>
        </ul>
      </div>
    </div>
</template>
<script>
export default {
    props:{
        title:{
            type:String,
            default:'未知'
        },widthData:{
            type:String,
            default:'100%'
        },listValue:{
            type:Array,
            default:[]
        },selectedValue:{
            type:String,
            default:''
        }
    },
    data(){
        return{

        }
    },methods:{
        showList(){
            this.widthData=!this.widthData
        },selected(index){
            this.$emit('changeMap',this.listValue[index].value)
            //this.selectedValue=this.listValue[index].value
        },openList(){
            
            let listBox= document.getElementsByClassName('list-box')
            if(listBox[0].style.display=='none')
            listBox[0].style.display='block';
            else
            listBox[0].style.display='none';
            //console.log(listBox= document.getElementsByClassName('list-box'))
        },
        close(e){
            let listBox= document.getElementsByClassName('list-box')
            listBox[0].style.display='none';
            console.log('aaaa')
        }
    }

}
</script>
<style>
.base-select{
  position:relative;
  margin:0;
  padding:0;
  overflow: visible;
  width: 100%;
  /* height: 100%; */
  display: flex;
  justify-content: center;
}


.base-select  .list-box{
  display: none;
  list-style-type:none;
  margin:0;
  padding:0;
  overflow: visible;
}
/* .base-select:focus .list-box{
    display: block;
} */
</style>
